<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
  <link rel="stylesheet" href="CSS/index4.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="Demo.html">扯淡头条</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">国内</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">国际</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">娱乐</a>
        </li>
      </ul>
      <ul class="navbar-nav nav-right">
        <li class="nav-item">
          <a href="login.html" class="nav-link">登陆</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">注册</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container"></div>
  <div class="row">
    <div class="col-sm-2">
      <div class="list-group side-bar">
        <a href="#" class="list-group-item active">综合</a>
        <a href="#" class="list-group-item">电影</a>
        <a href="#" class="list-group-item">电视剧</a>
        <a href="#" class="list-group-item">明星</a>
        <a href="#" class="list-group-item">音乐</a>
      </div>
    </div>
    <div class="col-sm-7">
      <div class="news-list">
        <div class="news-list-item">
          <div class="container">
            <div class="row">
              <div class="col-xs-5">
                <img src="img/69.png">
              </div>
              <div class="col-xs-7">
                <a href="#" class="title">ASUS ROG-STRIX-GTX1660TI-O6G-GAMING 评测</a>
                <div class="info">
                  <span><span class="avatar"><img src="img/001.jpg"></span>nApoleon</span> .
                  <span>评论: 16</span> .
                  <span>来自: www.chiphell.com</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="news-list-item">
          <div class="container">
            <div class="row">
              <div class="col-xs-5">
                <img src="img/69.png">
              </div>
              <div class="col-xs-7">
                <a href="#" class="title">ASUS ROG-STRIX-GTX1660TI-O6G-GAMING 评测</a>
                <div class="info">
                  <span><span class="avatar"><img src="img/001.jpg"></span>nApoleon</span> .
                  <span>评论: 16</span> .
                  <span>来自: www.chiphell.com</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="news-list-item">
          <div class="container">
            <div class="row">
              <div class="col-xs-5">
                <img src="img/69.png">
              </div>
              <div class="col-xs-7">
                <a href="#" class="title">ASUS ROG-STRIX-GTX1660TI-O6G-GAMING 评测</a>
                <div class="info">
                  <span><span class="avatar"><img src="img/001.jpg"></span>nApoleon</span> .
                  <span>评论: 16</span> .
                  <span>来自: www.chiphell.com</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="col-sm 3">
      <div class="search-bar">
        <input type="search" class="form-control">
      </div>
      <div class="side-bar-card flag">
        <div class="container">
          <div class="row">
            <div class="col-xs-3">
              <img src="img/001.jpg">
            </div>
            <div class="col-xs-9 text-lg">
              有害信息举报专区
              举报电话：12377
            </div>
          </div>
        </div>

      </div>
      <div class="side-bar-card">
        <div class="card-title">24小时新闻</div>
        <div class="card-body">
          <div class="list">
            <div class="item">
              <div class="item-title"><a href="">三星Note7爆炸案终审判决：不用道歉 只赔被烧坏的电脑</a>
              </div>
              <ite class="content">15k阅读 1k评论</ite>
            </div>
            <div class="item">
              <div class="item-title">中国工程师的命，也是命”</div>
              <ite class="content">16k阅读 3k评论</ite>
            </div>
            <div class="item">
              <div class="item-title">蔚来：第一季度交付3989辆ES8</div>
              <ite class="content">12k阅读 2k评论</ite>
            </div>
            <div class="item">
              <div class="item-title">The Verge 编辑：华为 P30 Pro 以一己之力提升了低光摄影的标准</div>
              <ite class="content">18k阅读 4k评论</ite>
            </div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>